<template>
	<div>
		<div class="recommend clearfix" 
			v-for="(item, index) in mvData" 
			:key="index"
			@click="recommendClick(item.id)">
			<div class="left">
				<img v-lazy="item.cover + '?param=500y260'">
				<div class="play-count">{{ item.playCount }}</div>
				<div class="time">{{ item.duration | formatTime }}</div>
				<div class="button"><i class="el-icon-caret-right"></i></div>
			</div>
			<div class="right">
				<p>{{ item.name }}</p>
				<p class="singer">{{ item.artistName }}</p>
			</div>
		</div>
	</div>
</template>

<script>
	import { mvRecommend } from "@/network/mv.js"
	import { formatTime } from "@/assets/tool.js"
	export default {
		name: 'MvRelatedRecommendations',
		data() {
			return {
				mvData: []
			}
		},
		created() {
			mvRecommend(this.$route.params.id).then(res => {
				this.mvData = res.data.mvs;
			})
		},
		filters: {
			formatTime: function(time) {
				return formatTime(time / 1000);
			}
		},
		methods: {
			// 点击推荐mv跳转
			recommendClick(id) {
				this.$router.push({name:'mv',params: {id: id}});
			}
		}
	}
</script>

<style lang="less" scoped>
	* {
		margin: 0;
		padding: 0;
	}
	.recommend {
		transition: all .3s;
	}
	.recommend > div {
		float: left;
		height: 100px;
		cursor: pointer;
	}
	.recommend:hover {
		background-color: var(--hover-bgcolor);
	}
	.recommend .left {
		position: relative;
		width: 45%;
		display: flex;
		align-items: center;
	}
	.recommend .left > img {
		width: 100%;
		height: 90%;
		border-radius: 5px;
	}
	.recommend .left .play-count, .time {
		position: absolute;
		color: var(--white);
		font-size: var(--small-font-size);
	}
	.recommend .left .button {
		position: absolute;
		font-size: 30px;
		width: 50px;
		height: 50px;
		background-color: var(--white);
		color: var(--blue);
		border-radius: 50%;
		text-align: center;
		line-height: 50px;
		left: 55px;
		top: 25px;
		opacity: 0;
		transition: all .3s;
	}
	.recommend:hover .button {
		opacity: 0.6;
	}
	.recommend .left .play-count {
		right: 5px;
		top: 8px;
	}
	.recommend .left .time {
		right: 5px;
		bottom: 8px;
	}
	.recommend .right {
		width: 55%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.recommend .right > p {
		width: 100%;
		font-size: var(--small-font-size);
		padding: 0 8px;
		line-height: 16px;
		color: var(--main-font-color);
	}
	.recommend .right > .singer {
		color: var(--secondary-font-color);
	}
</style>
